<template>
    <!-- 提交按钮 -->
    <button 
        class="submit"
        @click="handleClick"
    >
        SUBMIT
    </button>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
// 导入全局状态-查询结果
import { useQueryStore } from '../stores/query';

interface Props{
    method:string,
    match:string|string[]
}
// 从属性接收搜索方法和查询输入
const props=defineProps<Props>();
// 使用路由
const router=useRouter();
// 使用全局状态-查询结果
const query=useQueryStore();
// 点击事件回调函数
function handleClick():void{
    // 根据搜索方法和查询输入调用数据库搜索
    window.electronAPI.search(props.method,props.match).then((result:string[]|false)=>{
        // 当查询有效时
        if(result !== false){
            // 更新全局状态-查询结果
            query.update(result);
            // 路由跳转到查询页面
            router.push({
                path:'query'
            });
        }
    });
}
</script>

<style lang="scss" scoped>
/* 提交按钮样式 */
.submit{
    font-size:3vh;
    height:5vh;
    width:15vh;
    position:relative;
    left:81vw;
}
</style>
